<template>
  <div>
    <!-- 头部 -->
    <div v-if="sta==0">
      <van-nav-bar title="发表评价" left-arrow @click-left="exit" @click-right="keep" :fixed="true" :placeholder="true">
        <template #right>
          <span style="color:red">发表</span>
        </template>
      </van-nav-bar>
      <van-card :price="((data.price-0)*(data.select_num-0)).toFixed(2)" :desc="data.text" :title="data.name"
        :thumb="data.imgs?data.imgs[0].url:this.$url +'img/redmi9A12.jpg'">
      </van-card>
      <p class="one">商品评价：
        <van-rate v-model='value1' />
      </p>
      <p class="one">物流服务：
        <van-rate v-model='value2' />
      </p>
      <p class="one">服务态度：
        <van-rate v-model='value3' />
      </p>
      <p>
        <van-field v-model="message" rows="2" autosize label="评价" type="textarea" maxlength="200" placeholder="请输入留言"
          show-word-limit />
      </p>
    </div>
    <div v-if="sta==1">
      <van-nav-bar title="我的评价" left-arrow @click-left="exit" @click-right="exit" :fixed="true" :placeholder="true">
        <template #right>
          <span style="color:red">退出</span>
        </template>
      </van-nav-bar>
      <van-card :price="((data.price-0)*(data.select_num-0)).toFixed(2)" :desc="data.text" :title="data.name"
        :thumb="data.imgs?data.imgs[0].url:this.$url +'img/redmi9A12.jpg'">
      </van-card>
      <p>
      </p>
      <p class="one">商品评价：
        <van-rate v-model='value1' readonly />
      </p>
      <p class="one">物流服务：
        <van-rate v-model='value2' readonly />
      </p>
      <p class="one">服务态度：
        <van-rate v-model='value3' readonly />
      </p>
      <van-field v-model="message" readonly rows="2" autosize label="评价" type="textarea" maxlength="200"
        placeholder="请输入留言" show-word-limit />
    </div>
  </div>
</template>

<script>
export default {
  //数据
  data() {
    return {
      sta: 0,
      data: "",
      value1: 4,
      value2: 4,
      value3: 4,
      message: "",
    };
  },
  //方法
  methods: {
    exit() {
      this.$router.go(-1);
    },
    keep() {
      let estimate =
        "商品评价：" +
        this.value1 +
        "星;" +
        "物流服务：" +
        this.value1 +
        "星;" +
        "服务态度：" +
        this.value1 +
        "星;" +
        "留言:" +
        this.message;
      console.log(this.data);
      var data_order = {
        id: this.data.id,
        select_num: this.data.select_num,
        is_payment: this.data.is_payment,
        is_refund: this.data.is_refund,
        is_get: this.data.is_get,
        is_deliver: this.data.is_deliver,
        estimate: estimate,
        is_to_refund: this.data.is_to_refund,
      };
      console.log(data_order);
      let myurl = this.$url + "order_change";
      this.axios.post(myurl, { data_order }).then((res) => {
        this.$toast.success("发布成功");
        console.log(res);
        this.$router.go(-1);
      });
    },
  },
  //创建完成生命周期
  created() {
    let id = this.$route.params.order_id;
    let myur = this.$url +"order_read";
    this.axios.post(myur, { id }).then((res) => {
      let b = res.data.data;
      b = b.replace(/\\/g, "");
      b = b.replace(/:"\[/g, ":[");
      b = b.replace(/\]"/g, "]");
      b = b.replace(/"false"/g, "false");
      b = b.replace(/"true"/g, "true");
      b = JSON.parse(b);
      this.data = b[0];
      if (this.data.estimate != "") {
        this.sta = 1;
        this.value1 = this.data.estimate[5] - 0;
        this.value2 = this.data.estimate[13] - 0;
        this.value3 = this.data.estimate[21] - 0;
        for (let i = 27; i < this.data.estimate.length; i++) {
          this.message += this.data.estimate[i];
        }
      } else {
        this.sta = 0;
      }
    });
    this.$nextTick(function () {
      this.$forceUpdate();
    });
  },
};
</script>

<style scoped>
.one {
  margin-left: 5%;
}
</style>